<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { linkType, ihEmitType } from './type'

const emits = defineEmits<ihEmitType>()
const links = ref<Array<linkType>>([
  { name: '文档', path: '/doc', id: 1 },
  { name: '组件', path: '/comp', id: 2 },
  { name: '应用', path: '/apply', id: 3 }
])
const route = useRoute()
const router = useRouter()
const current = ref<number>(1)
const chgCurrent = (data: linkType) => {
  const isLeft = data.id >= current.value ? true : false
  current.value = data.id
  router.push(data.path)
  emits('change', isLeft)
}

watch(
  () => route.path,
  (nval) => {
    if (nval.includes('/doc')) {
      current.value = 1
    } else if (nval.includes('/comp')) {
      current.value = 2
    } else if (nval.includes('/apply')) {
      current.value = 3
    }
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="header-wrap flex-h-sbc">
    <div class="logo-wrap flex-h-sc">
      <img class="logo" src="@assets/images/logo.png" />
    </div>
    <div class="menus-wrap flex-h-ec">
      <div
        class="menu"
        :class="{ active: item.id == current }"
        v-for="(item, inx) in links"
        :key="item.id"
        @click="chgCurrent(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-wrap {
  @include size(100%, 100%);
  .logo-wrap {
    @include size(auto, 100%);
    .logo {
      @include size(auto, 96%);
    }
  }
  .menus-wrap {
    @include size(auto, 100%);
    .menu {
      @include font(14px, 64px, rgba(0, 0, 0, 0.88));
      padding: 0 10px;
      cursor: pointer;
      &.active {
        color: #1677ff;
      }
    }
  }
}
</style>
